<template>
  <div class="console-account">
    <el-card class="box-card">
      <el-row class="top">
        <el-col :span="3">
          <div class="item">
            <div class="label">账户可用余额</div>
            <div class="green">￥<span class="fs20">{{ balanceInfo.balance }}</span></div>
          </div>
        </el-col>
        <el-col :span="1">
          <!-- <div class="fs20 item fuhao">=</div> -->
        </el-col>
        <el-col :span="4">
          <div class="item">
            <div class="flex">
              <div class="label">充值余额</div>
              <div><el-button type="primary" size="mini" @click="recharge">充值</el-button></div>
            </div>
            <div class="green">￥<span class="fs20">{{ balanceInfo.balance }}</span></div>
          </div>
        </el-col>
        <el-col :span="1">
          <!-- <div class="fs20 item fuhao">-</div> -->
        </el-col>
        <!-- <el-col :span="6">
          <div class="item">
            <div class="label"><span>冻结金额</span><span class="link">什么是冻结金额？</span></div>
            <div>￥<span class="fs20">0.00</span></div>
          </div>
        </el-col> -->
      </el-row>
    </el-card>
    <el-row class="row" :gutter="20">
      <el-col :span="15">
        <el-card class="box-card quan">
          <div class="content">
            <div class="citem">
              <div class="label">代金券</div>
              <div>￥<span class="fs20">{{ balanceInfo.coupon1 }} 元</span></div>
              <div class="link">查看</div>
            </div>
            <div class="citem">
              <div class="label">优惠券</div>
              <div>￥<span class="fs20">{{ balanceInfo.coupon2 }} 小时</span></div>
              <div class="link">查看</div>
            </div>
          </div>
          <!-- <div class="btn"><el-button type="primary" size="small">礼券兑换</el-button></div> -->
        </el-card>
      </el-col>
      <el-col :span="9">
        <el-card class="box-card">
          <div class="ditem">
            <div class="label">可开票金额</div>
            <div>￥<span class="fs20">{{ balanceInfo.invoiceAmount }}</span></div>
            <div class="link">申请开发票</div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import request from '@/utils/request'
export default {
  name: 'Account',
  data() {
    return {
      tableData: [],
      balanceInfo: {}
    }
  },
  mounted() {
    this.getBalance()
  },
  computed: {
    key() {
      return this.$route.path
    },
    ...mapGetters([
      'name'
    ])
  },
  methods: {
    getBalance(){
      request.get('/xsy-service-web/WebUser/balance').then(res => {
        this.balanceInfo = res.data
      })
    },
    recharge() {
      this.$router.push('/console/account/recharge')
    }
  }
}
</script>

<style lang="scss" scoped>
.label {
  color: #999;
  height: 32px;
  line-height: 32px;
  margin-right: 12px;
}
.link {
  color: #417eff;
  cursor: pointer;
  margin-left: 12px;
}
.green {
  color: #ff7200;
}
.fs20 {
  font-size: 26px;
  font-weight: 600;
}
.fuhao {
  margin-top: 25px;
}
.row {
  margin-top: 20px;
  .content {
    height: 100px;
    display: flex;
    .citem {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
    }
  }
}
.ditem {
  height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.quan {
  position: relative;
  .btn {
    position: absolute;
    right: 10px;
    top: 10px;
  }
}
.top {
  height: 100px;
  .el-col {
    height: 100%;
    .item {
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
    }
    .flex {
      display: flex;
      align-items: center;
    }
  }
}
</style>
